<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>EVOLVE</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/style.css">

    <!-- JS
  ================================================== -->
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script> <!-- jQuery -->
	<script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <!-- jQuery easing -->
	<script src="js/modernizr.custom.js" type="text/javascript"></script> <!-- Modernizr -->
    <script src="js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script> <!-- tabs, toggles, accordion -->
    <script src="js/custom.js" type="text/javascript"></script> <!-- jQuery initialization -->
  
    <!-- Responsive Menu -->
    <script src="js/jquery.meanmenu.js"></script> 
    <script>
    jQuery(document).ready(function () {
    jQuery('header nav').meanmenu();
    });
    </script>
	
	<!-- Tooltip -->
    <script src="js/tooltip.js"></script>

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

</head>
<body>



	<!-- Primary Page Layout
	================================================== -->

<header class="header">
<div class="container">
<div class="logos columns">
<h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="EVOLVE" /></a></h1>
</div><!-- logo -->

<div class="twelve columns">
<nav class="main_menu">

<ul>
<li>
<a href="index.html">
Home
<div class="sub">
Get Started
</div>
</a>
<ul>
<li><a href="index.html">Home Version 1</a></li>
<li><a href="index-2.html">Home Version 2</a></li>
<li><a href="index-3.html">Home Version 3</a></li>
<li><a href="index-4.html">Home Version 4</a></li>
<li><a href="index-5.html">Home Version 5</a></li>
<li><a href="index-6.html">Home Version 6</a></li><li><a href="http://www.weidea.net">More</a></li>
</ul>
</li>

<li class="current_page_item">
<a href="about-us.html">
Pages
<div class="sub">
Page Formats
</div>
</a>
<ul>
<li><a href="about-us.html">About Us</a></li>
<li><a href="about-us-2.html">About Us 2</a></li>
<li><a href="about-me.html">About Me</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="services-2.html">Services 2</a></li>
<li><a href="meet-the-team.html">Meet The Team</a></li>
<li><a href="meet-the-team-2.html">Meet The Team 2</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="full-width-page.html">Full Width Page</a></li>
<li><a href="page-right-sidebar.html">Right Sidebar</a></li>
<li><a href="page-left-sidebar.html">Left Sidebar</a></li>
<li><a href="404-error-page.html">404 Error Page</a></li>
</ul>
</li>

<li>
<a href="#">
Shortcodes
<div class="sub">
Useful Shortcodes
</div>
</a>
<ul>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="dropcaps.html">Dropcaps</a></li>
<li><a href="accordion-toggles.html">Accordion & Toggles</a></li>
<li><a href="grid-columns.html">Grid Columns</a></li>
<li><a href="images.html">Images</a></li>
<li><a href="video.html">Video</a></li>
</ul>
</li>

<li>
<a href="portfolio-2-columns.html">
Portfolio
<div class="sub">
Awesome Stuff
</div>
</a>
<ul>
<li><a href="portfolio-1-column.html">1 Column</a></li>
<li><a href="portfolio-2-columns.html">2 Columns</a></li>
<li><a href="portfolio-3-columns.html">3 Columns</a></li>
<li><a href="portfolio-4-columns.html">4 Columns</a></li>
<li><a href="single-project-half.html">Single Project Half</a></li>
<li><a href="single-project-wide.html">Single Project Wide</a></li>
</ul>
</li>

<li>
<a href="blog-large.html">
The Blog
<div class="sub">
News & Events
</div>
</a>
<ul>
<li><a href="blog-large.html">Large Image</a></li>
<li><a href="blog-medium.html">Medium Image</a></li>
<li><a href="blog-post.html">Single Post</a></li>
</ul>
</li>

<li>
<a href="contact.html">
Contact US
<div class="sub">
Write Message
</div>
</a>
</li>
</ul>

</nav><!-- navigation -->
</div>
<div class="clearfix"></div>
</div>
</header><!-- header -->

<div class="container">
<div class="sixteen columns page-title">
<div class="eight columns alpha">
<h3> <span>About Me</span> </h3>
</div>
<div class="eight columns omega">
<nav class="breadcrumbs">
<ul>
<li>You are here:</li>
<li>
<a href="#">Home</a>
</li>
<li>About Me</li>
</ul>
</nav>
</div>
<div class="clearfix"></div>
</div><!-- page-title -->
</div><!-- container -->

<div class="container">

<div class="sixteen columns">
<h3 class="name" style="margin:0;">John Doe</h3>
<h6 style="text-transform:none; font-family: 'OpenSansRegular'; color: #999999; display: block; margin-bottom: 10px;">Web Designer</h6>
</div>

<div class="eight columns">
<img class="photo" src="images/about/about-me.jpg" alt="Team Member">
</div>

<div class="eight columns">
<p>
In at odio id dui vulputate sodales nec at arcu. Nullam eu dolor ut nulla feugiat dapibus at ornare nulla. Curabitur sed justo purus. Etiam velit leo, condimentum at bibendum consectetur, luctus eu dui. Donec lacinia, leo vel pulvinar tempor, nisl dolor fringilla enim, eu condimentum est nunc eget felis.
</p>
</p>
Ut libero nibh, viverra at faucibus at, posuere non tortor. Suspendisse potenti. Sed et nulla eu est eleifend porta. Ut lobortis nisi nec nisi tempor iaculis. Mauris leo elit, luctus et ullamcorper eget, hendrerit vel nulla. Suspendisse ullamcorper erat nec turpis tempor luctus. Duis gravida posuere blandit. Nulla in metus orci, non adipiscing ante. Nulla non pellentesque neque. Cras rutrum semper odio, vel eleifend diam suscipit at.
</p>

<i class="fa fa-envelope"></i><a href="mailto:john.doe@website.com" style="color:#04BFEA; margin-left:10px;">john.doe@website.com</a> <br>
<i class="fa fa-phone"></i><span style="color:#04BFEA; margin-left:10px;">+1 (229) 991-22-11</span>
				<div class="tooltips" style="margin-top:5px;">			
			    <ul class="social">
				<li><a href="#" data-rel="tooltip" title="Twitter"><i class="fa fa-twitter"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Facebook"><i class="fa fa-facebook"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Google+"><i class="fa fa-google-plus"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Skype"><i class="fa fa-skype"></i></a></li>
			    </ul>
                </div>
</div>

<div class="clearfix"></div>
<div class="separator"></div>
		
        <div class="sixteen columns" style="text-align:center;">
            <a href="#" class="btn colored">Join the Team</a>
		    <a href="blog-post.html" class="btn colored">Browse Work</a>
        </div>
		
<div class="clearfix"></div>
<div class="separator"></div>

        <div class="sixteen columns">
        <h2 style="text-align:center;">My area of expertise</h2>
        </div>
		
<div class="clearfix"></div>
<div class="separator"></div>
		
				<div class="one-third column">
					<!-- Icon Box -->
					<div class="icon-box medium">
						<i class="fa fa-html5 medium colored"></i>
						<h4><a href="#" class="dark-link">Duis Autem Vel Eum</a></h4>
						<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim.</p>
					</div>
					<!-- End Icon Box -->
				</div>
				<div class="one-third column">
					<!-- Icon Box -->
					<div class="icon-box medium">
						<i class="fa fa-css3 medium colored"></i>
						<h4><a href="#" class="dark-link">Qui Blandit Praesent</a></h4>
						<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim.</p>
					</div>
					<!-- End Icon Box -->
				</div>
				<div class="one-third column">
					<!-- Icon Box -->
					<div class="icon-box medium">
						<i class="fa fa-magic medium colored"></i>
						<h4><a href="#" class="dark-link">Tation Dipiscing Elit</a></h4>
						<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim.</p>
					</div>
					<!-- End Icon Box -->
				</div>			

				<div class="clearfix"></div>
			
			<div class="separator"></div>
			
	<!-- begin promobox -->
	<div class="sixteen columns">
	    <div class="promo-box clearfix">
	        <div class="text">
	        <h3>Suspendisse Cursus Diam Quis Tortor Posuere Vehicula.</h3>
	        <p>Lorem ipsum dolor sit amet, cons adipiscing elit. Aenean commodo ligula eget dolor.</p>
	        </div>
	        <a class="btn big colored" href="#"><i class="fa fa-hand-o-right"></i>Button Text</a>
	    </div>	
	</div>	
    <!-- end promobox -->


</div><!-- container -->

	<footer class="footer">
    <div class="container">
	<div class="footer-top clearfix">
	<div class="four columns">
	<h3>About Us</h3>
	<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
    <p>Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p>
	</div>
	<div class="four columns">
						<h3>Latest Tweets</h3>
						<div class="twitter">
							<ul>
								<!-- Twitter Message 1 -->
								<li>
									<span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem <a href="#" class="link">http://twitter.com</a></span>
									<span class="twit-date">Jan 7, 2013</span>
								</li>
								<!-- Twitter Message 2 -->
								<li>
									<span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aliquid :) <a href="#" class="link">http://twitter.com</a></span>
									<span class="twit-date">Jan 7, 2013</span>
								</li>
							</ul>
						</div>
</div>
<div class="four columns">
<h3>Flickr Stream</h3>
						<div class="latest-project">
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-1.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-2.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-3.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-4.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-5.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-6.jpg" alt=""></a>
							</div>
						</div>
</div>
<div class="four columns">
						<h3>Contact Information</h3>
						<ul class="list contact" style="margin-bottom: 15px;">
							<li class="contact-address"><i class="fa fa-map-marker"></i><span>103088. Ut wisi enim ad minim veniam, quis nostrud.</span></li>
							<li class="contact-mail"><i class="fa fa-envelope"></i><a class="link" href="#">mail@mail.com</a></li>
							<li class="contact-phone"><i class="fa fa-phone"></i><span>+1 (229) 991-22-11</span></li>
							<li class="contact-address"><i class="fa fa-clock-o"></i><span>Monday-Friday: 9:<sup>00</sup> - 18:<sup>00</sup><br>
							Saturday: 10:<sup>00</sup> - 17:<sup>00</sup><br>
							Sunday: closed</span>
							</li>
						</ul>
		
<div class="tooltips">			
			<ul class="social-icons-footer">
				<li><a href="#" data-rel="tooltip" title="Twitter"><i class="fa fa-twitter"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Facebook"><i class="fa fa-facebook"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Google+"><i class="fa fa-google-plus"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Pinterest"><i class="fa fa-pinterest"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Dribbble"><i class="fa fa-dribbble"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="RSS"><i class="fa fa-rss"></i></a></li>
			</ul>
</div>

</div>
	</div><!-- footer-top -->
	</div>

	<div class="container">
	<div class="footer-bottom clearfix">
	<div class="eight columns">
	<p>Copyright &copy; 2014 <a href="#">alphawd</a>. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>.</p>
	</div>
	<div class="eight columns">
	<nav class="footer-nav">
<ul>
<li>
<a class="first" href="index.html">Home</a>
/
</li>
<li>
<a href="#">Shortcodes</a>
/
</li>
<li>
<a href="portfolio-2-columns.html">Portfolio</a>
/
</li>
<li>
<a href="blog-large.html">Blog</a>
/
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</div><!-- footer-bottom -->
</div>
	
</footer><!-- footer -->

<!-- End Document
================================================== -->
</body>
</html>